<template>
	<!-- 第三方登录 -->
	<view class="other-login u-f-ac">
		<block v-for="(item, index) in providerList" :key="index" >
			<view class="u-f-ajc u-f1" @tap="tologin(item)">
				<view class="icon iconfont  u-f-ajc" :class="['icon-'+item.icon]"></view>
			</view>
		</block>
		<!-- <view class="u-f-ajc u-f1"><view class="icon iconfont icon-xinlangweibo u-f-ajc"></view></view>
		<view class="u-f-ajc u-f1"><view class="icon iconfont icon-QQ u-f-ajc"></view></view> -->
	</view>
</template>

<script>
	export default {
		data(){
			return {
				providerList: []
			}
		},
		mounted() {
			this.getLoginAuth();
		},
		methods:{
			//获取当前登录渠道
			getLoginAuth(){
				uni.getProvider({
					service: 'oauth',
					success: (result) => {
						let providerList = result.provider.map((value) => {
							let providerName = '';
							let icon = '';
							switch (value) {
								case 'weixin':
									providerName = '微信登录'
									icon = 'weixin';
									break;
								case 'qq':
									providerName = 'QQ登录'
									icon = 'QQ';
									break;
								case 'sinaweibo':
									providerName = '新浪微博登录'
									icon = 'xinlangweibo';
									break;
								case 'xiaomi':
									providerName = '小米登录'
									icon = '';
									break;
								case 'alipay':
									providerName = '支付宝登录'
									icon = '';
									break;
								case 'baidu':
									providerName = '百度登录'
									icon = '';
									break;
								case 'toutiao':
									providerName = '头条登录'
									icon = '';
									break;
							}
							return {
								name: providerName,
								icon: icon,
								id: value
							}
						});
						
						for (var i = 0; i < providerList.length; i++) {
							if (providerList[i].icon != '') {
								this.providerList.push(providerList[i]);
							}
						}
					},
					fail: (error) => {
						console.log('获取登录通道失败', error);
					}
				});
			},
			//登陆的方法
			tologin(provider){
				uni.login({
					provider: provider.id,
					success: (res) => {
						console.log("login success:", JSON.stringify(res));
						console.log("登陆成功 保存到本地存储 修改当前用户登录状态")
					},
					fail: (err) => {
						console.log("login fail:", err);
					}
				})
			}
		}
	}
</script>

<style scoped>
	.other-login {
		padding: 20upx 80upx;
	}
	
	.other-login .u-f-ajc {
		width: 100upx;
		height: 100upx;
		/* border: 1upx solid; */
		border-radius: 100%;
		font-size: 55upx;
		color: #FFFFFF;
	}
	
	.other-login .icon-QQ{
		background-color: #2CAEFC;
	}
	
	.other-login .icon-weixin{
		background-color: #2BD19B;
	}
	
	.other-login .icon-xinlangweibo{
		background-color: #FC7729;
	}
	
</style>
